<template>
  <div>
    <el-form ref="editForm"
             :model="formData"
             :rules="formRules"
             :label-width="formLabelWidth"
             @submit.native.prevent>
      <el-row>
        <el-col v-for="(item, index) in formOptions"
                :key="index"
                :span="item.span || 24">
          <el-form-item :label="item.label"
                        :prop="item.prop ? item.prop : item.key"
                        class="e-search-from-item">
            <template v-if="item.type === 'text'">
              <el-input 
                  v-model="formData[item.key]"
                  disabled 
                  v-bind="item.props"
               >
               </el-input>
            </template>
            <template v-if="item.type === 'input'">
              <el-input v-model="formData[item.key]"
                        v-bind="item.props"></el-input>
            </template>
            <template v-if="item.type === 'number'">
              <el-input-number v-model="formData[item.key]"
                               v-bind="item.props"
                               style="width:100%;"></el-input-number>
            </template>
            <template v-if="item.type === 'select'">
              <el-select v-model="formData[item.key]"
                         v-bind="item.props">
                <el-option v-for="(sitem, sindex) in item.options"
                           :key="sindex"
                           :label="sitem.label"
                           :value="sitem.value">
                </el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'time'">
              <el-time-select v-model="formData[item.key]"
                              v-bind="item.props"
                              style="width:100%;">
              </el-time-select>
            </template>
            <template v-if="item.type === 'date'">
              <el-date-picker v-model="formData[item.key]"
                              v-bind="item.props"
                              style="width:100%;">
              </el-date-picker>
            </template>
            <template v-if="item.type === 'radio'">
              <el-radio-group v-model="formData[item.key]"
                              v-bind="item.props">
                <el-radio v-for="(sitem, sindex) in item.options"
                          :key="sindex"
                          :label="sitem.label">{{sitem.text}}</el-radio>
              </el-radio-group>
            </template>
            <template v-if="item.type === 'checkbox'">
              <el-checkbox-group v-model="formData[item.key]"
                                 v-bind="item.props">
                <el-checkbox v-for="(sitem, sindex) in item.options"
                             :key="sindex"
                             :label="sitem.label"
                             v-bind="sitem.props">{{sitem.text}}</el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-if="item.type === 'cascader'">
              <el-cascader v-model="formData[item.key]"
                           v-bind="item.props"
                           style="width:100%;"></el-cascader>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'e-form',
  components: {},
  props: {
    formOptions: {
      type: Array,
      default () {
        return []
      }
    },
    formLabelWidth: {
      type: String,
      default: '80px'
    },
    formDataCurrent: {
      type: Object,
      default () {
        return {}
      }
    },
    formRules: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      formData: {}
    }
  },
  watch: {
    formOptions: {
      handler (value) {
        this.handleFormDateCreate(value)
      },
      immediate: true
    },
    formDataCurrent: {
      handler (value) {
        this.formData = { ...value }
        this.handleFormDateCreate(this.formOptions)
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    handleFormDateCreate (list) {
      list.map(item => {
        let data
        switch (item.type) {
          case 'checkbox':
            data = []
            break
          default:
            data = ''
            break
        }
        if (!this.formData[item.key] && this.formData[item.key] !== 0) {
          this.$set(this.formData, item.key, data)
        }
      })
    },
    handleRefresh () {
      this.$refs.editForm.resetFields()
    },
    handleValidate (fun) {
      this.$refs['editForm'].validate((valid) => {
        fun(valid)
      })
    }
  },
  created () { },
  mounted () { }
}
</script>
<style lang="scss" scoped>
.e-search-from-item {
  .el-select {
    width: 100%;
  }
}
</style>
